<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Overview' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="title">
      <h1>用户详情页</h1>
    </el-card>

    <!--卡片视图区域-->
    <el-card>

      <!-- 搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="12"><div class="block">
          <el-date-picker
            v-model="timeInterval"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
        </div></el-col>
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="userAddr" clearable @clear="" style="width: 200px">

          </el-input>
<!--          <el-dropdown split-button type="primary" @command="handleCommand">-->
<!--            选择用户-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item v-for="user in userAddrList" :command="user">{{user}}</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
          <el-button icon="el-icon-search" @click="search" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <FlowPreferenceChart />
        </el-col>
        <el-col :span="12">
          <UserTimeLineChart :dateList="dateList"/>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <!--用户列表区域-->
        <el-col :span="12">
          <div>
            <!--  用户列表区域-->
            <h3 style="text-align: center">流量告警信息</h3>
            <el-table :data="userlist" border stripe size="mini">
              <el-table-column type="index"/>
              <el-table-column label="destAddr" prop="destAddr"/>
              <el-table-column label="port" prop="port"/>
              <el-table-column label="alarmType" prop="alarmType"/>
              <el-table-column label="date" prop="date"/>
              <el-table-column label="valid" prop="valid"/>
            </el-table>
            <!--  分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
<!--          <WarningTable :dataObj="{'userAddr':userAddr,'dateList':dateList}" :userAddr="userAddr" :timeChange="timeChange"/>-->
        </el-col>
        <el-col :span="12">
          <WarningChart ></WarningChart>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import FlowPreferenceChart from "../userChart/FlowPreferenceChart";
import WarningChart from '../userChart/WarningChart'
import UserTimeLineChart from '../userChart/UserTimeLineChart'
import WarningTable from '../userChart/WarningTable'
import FlowChartDataHandle from '../../DataHandle/FlowChartDataHandle'

export default {
  name: 'UserDetailsTable',
  components: {
    FlowPreferenceChart,
    WarningChart,
    UserTimeLineChart,
    WarningTable
  },
  data() {
    // 验证手机的规则
    return {
      setIntervalFlag:null,
      queryInfo: {
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5
      },
      total: 3,
      userlist: [],
      userAddrList : [11,22,33],
      userAddr: '10.16.195.164',
      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate: time => {
          let _now = Date.now()
          let seven = 30 * 24 * 60 * 60 * 1000
          let preSevenDays = _now - seven
          return time.getTime()> _now || time.getTime() < preSevenDays
        },
        onPick: (maxDate, minDate) => {
          maxDate = minDate + 7 * 24 * 60 * 60 * 1000
        }
      }, // 日期设置对象
      timeInterval: '',
      dateList:['2019-12-20', '2019-12-21', '2019-12-22', '2019-12-23', '2019-12-24', '2019-12-25'],
      // 获取用户列表的参数对象
      timeChange:false
    }
  },
  watch: {
    timeInterval(date) {
      this.dateList = []
      let startDay = date[0]
      let endDay = date[1]
      let dateInterval = (endDay - startDay) / 1000 / 60 / 60 / 24 + 1
      let oneDay = 24 * 60 * 60 * 1000
      for (let i = 0; i < dateInterval; i++) {
        let nextDay = startDay.getTime() + oneDay * i
        nextDay = new Date(nextDay)
        this.dateList.push(
          `${nextDay.getFullYear()}-${nextDay.getMonth() +
          1}-${nextDay.getDate()}`
        )
      }
      this.timeChange = !this.timeChange
      // this.getSpecifiedDateData()
      this.autoRefresh();
    },
  },
  created() {
    this.autoRefresh();
    // this.getDefaultData(this.userAddr,this.dateList[0],this.dateList[this.dateList.length - 1])
  },
  beforeDestroy() {
    clearInterval(this.setIntervalFlag);
  },
  methods: {
    autoRefresh(){
      let today = new Date();
      let todayStr = `${today.getFullYear()}-${today.getMonth() +
      1}-${today.getDate()}`
      if (todayStr === this.dateList[this.dateList.length - 1]) {
         this.setIntervalFlag = setInterval(()=>{
          this.getSpecifiedDateData()
        },5000)
      } else {
        clearInterval(this.setIntervalFlag)
        this.getSpecifiedDateData()
      }
    },
    handleCommand(command) {
      this.userAddr = command
      this.getSpecifiedDateData();
    },
    async getDefaultData(userAddr,startDate,endDate) {
      let params = new URLSearchParams()
      params.append('addr',userAddr)
      params.append('startDate', startDate)
      params.append('endDate', endDate)
      console.log(userAddr,startDate,endDate)
      let typeJsonRes = await this.$http.post(
        '/accessType/findAllAccessType',
      )
      let getUserCapPackClassifyForDateRes = await this.$http.post(
        '/zz/getUserCapPackClassifyForDate',
        params
      )
      if (getUserCapPackClassifyForDateRes.data.status !== 200) {
        return this.$message.error('请求数据失败')
      } else {
        FlowChartDataHandle.typeJson=typeJsonRes.data
        console.log("timeLIne")
        console.log(getUserCapPackClassifyForDateRes)
        let resDate1 =
          FlowChartDataHandle.tran(getUserCapPackClassifyForDateRes.data,FlowChartDataHandle.typeJson,
            new Date(startDate),0
          )
        this.$Pubsub.publish("UserTimeLineData",resDate1[1])
        //某个用户特定时间内的喜好访问类型
        let resDate2 =  FlowChartDataHandle.userAiHaoFenLeiTran(getUserCapPackClassifyForDateRes.data,FlowChartDataHandle.typeJson, 1
        )
        this.$Pubsub.publish("FlowPreferenceData",resDate2)
        console.log(resDate2)
      }


      //某个用户特定时间内的告警信息
      let getUserAlarmByDateRes = await this.$http.post(
        '/zz/getUserAlarmByDate',
        params
      )
      if (getUserAlarmByDateRes.data.status !== 200) {
        return this.$message.error('请求数据失败')
      } else {
        console.log("userAlarmData")
        console.log(getUserAlarmByDateRes)
        let resDate =
          FlowChartDataHandle.userAlarmTran(getUserAlarmByDateRes.data)
        this.$Pubsub.publish("userAlarmData",resDate)
        console.log(resDate)
      }
      // 获取所有用户的信息
      let findAllUserRuleRes = await this.$http.get(
        '/userRule/findAllUserRule',
      )
      if (findAllUserRuleRes.data.status !== 200) {
        return this.$message.error('请求数据失败')
      } else {
        console.log(findAllUserRuleRes.data.userRule)
        let userObject = findAllUserRuleRes.data.userRule

        let userArray = []
        if(userObject.length === 0){
          return this.$message.error('没有一个用户')
        }
        let isHaveFlag=false;
        userArray.push(userObject[0].addr);
        for (let i = 0; i < userObject.length ; i++) {
           let addr =  userObject[i].addr;
            isHaveFlag=false
           for (let j = 0; j < userArray.length; j++) {
             if (userArray[j] === addr){
               isHaveFlag=true
               break
             }
           }
          if(!isHaveFlag) {
            userArray.push(addr)
          }
        }
        this.userAddrList = userArray
      }
      this.getUserList()

    },
    async getSpecifiedDateData() {
      await this.getDefaultData(this.userAddr,this.dateList[0],this.dateList[this.dateList.length - 1])
    },
    search(){
      this.getSpecifiedDateData();
    },
    async getUserList () {
      let params = new URLSearchParams()
      params.append('pagenum', this.queryInfo.pagenum - 1)
      params.append('pagesize', this.queryInfo.pagesize)
      params.append('addr', this.userAddr)
      params.append('startDate', this.dateList[0])
      params.append('endDate', this.dateList[this.dateList.length-1])
      let getUserAlarmSplitPageByDateRes = await this.$http.post(
        '/zz/getUserAlarmSplitPageByDate',
        params
      )
      if (getUserAlarmSplitPageByDateRes.data.status !== 200) {
        return this.$message.error('获取失败！')
      }
      this.userlist = getUserAlarmSplitPageByDateRes.data.userAlarmList
      console.log(getUserAlarmSplitPageByDateRes.data)
      this.total = parseInt(getUserAlarmSplitPageByDateRes.data.totalNum)
    },
    // 监听 pagesize 改变事件
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
  }
}
</script>

<style lang="less" scoped>
</style>
